<template>
  <div class="commentList">
    <van-cell v-if="reply">
      <van-image slot="icon" cover round :src="reply.aut_photo"></van-image>
      <span slot="title" class="nameText">{{ reply.aut_name }}</span>
      <div slot="label">
        <div class="contentText">{{ reply.content }}</div>
        <div class="replyBox">
          <span>{{ reply.pubdate | relativeTime }}</span>
          <van-button type="default" size="mini" round @click="$emit('replyCilck', reply)">{{ list.length }} 回复</van-button>
        </div>
      </div>
      <div slot="right-icon">
        <van-icon
          :name="reply.is_liking ? 'like' : 'like-o'"
          :class="{ liked: reply.is_liking }"
          @click="toLike(reply)"
        ></van-icon>
        {{ reply.like_count }}
      </div>
    </van-cell>
    <p class="text">全部评论</p>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <span class="total">共 {{ list.length }} 条评论</span>
      <van-cell v-for="(item, index) in list" :key="index">
        <van-image slot="icon" cover round :src="item.aut_photo"></van-image>
        <span slot="title" class="nameText">{{ item.aut_name }}</span>
        <div slot="label">
          <div class="contentText">{{ item.content }}</div>
          <div class="replyBox">
            <span>{{ item.pubdate | relativeTime }}</span>
            <van-button type="default" size="mini" round @click="replyClick(item)">{{ item.reply_count }} 回复</van-button>
          </div>
        </div>
        <div slot="right-icon">
          <van-icon
            :name="item.is_liking ? 'like' : 'like-o'"
            :class="{ liked: item.is_liking }"
            @click="toLike(item)"
          ></van-icon>
          {{ item.like_count }}
        </div>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import jsonBig from 'json-bigint'
import { getComment, toLike, cancelLike } from '@/api/comment.js'
// import PubComment from './pubComment.vue'
// import attitude from '@/components/attitude'
export default {
  name: 'ArticleComment',
  components: {
    // PubComment
  },
  props: {
    // 文章id或评论id
    sourceId: {
      type: [Object, String, Number],
      default: null
    },
    list: {
      type: Array,
      default: () => []
    },
    type: {
      type: String,
      default: 'a'
    },
    reply: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      loading: false, // list的loading
      finished: false,
      offset: null,
      total: null,
      endId: null
      // popupShow: false
    }
  },
  updated() {
    // console.log(this.reply);
    // console.log(this.sourceId);
  },
  methods: {
    async onLoad() {
      console.log(this.sourceId);
      const {
        data: { data }
      } = await getComment({
        type: this.type,
        source: jsonBig.stringify(this.sourceId),
        offset: this.offset,
        limit: 10
      })
      console.log(data)
      this.total = data.total_count
      this.list.push(...data.results)
      this.offset = data.last_id
      this.endId = data.end_id
      this.loading = false
      if (data.results.length === 0) {
        this.finished = true
      }
    },
    async toLike(item) {
      try {
        if (item.is_liking) {
          // 点赞状态
          await cancelLike(item.com_id)
          item.like_count--
        } else {
          // 非点赞状态
          await toLike(item.com_id)
          item.like_count++
        }
        item.is_liking = !item.is_liking
      } catch (error) {
        this.$toast.fail('操作失败')
      }
    },
    replyClick(item) {
      this.$emit('replyCilck', item)
    }
  }
}
</script>

<style scope lang="less">
.van-list {
  padding-bottom: 88px;
  .total {
    font-size: 28px;
  }
}
.van-cell {
    padding: 48px 30px 0;
    background-color: rgba(0, 0, 0, 0);
    .liked {
      color: red;
    }
    .van-image {
      width: 75px;
      height: 75px;
      .van-image__img {
        width: 75px;
        height: 75px;
      }
    }
    .van-cell__title {
      padding: 0 23px;
      .contentText {
        width: 500px;
        font-size: 34px;
        color: #333;
        padding: 24px 0 36px;
        word-wrap: break-word;
      }
      .replyBox {
        & > span {
          font-size: 20px;
          margin-right: 40px;
        }
        .van-button {
          width: 135px;
          height: 45px;
          text-align: center;
          vertical-align: middle;
          background-color: #f4f5f6;
          border: 1px solid #ccc;
        }
      }
    }
    .nameText {
      font-size: 32px;
      color: #406599;
    }
}
.text {
  font-size: 30px;
  padding: 15px 20px 5px
}
.total {
  padding: 0 50px
}
</style>
